---
import TheHeader from '@/components/TheHeader.vue';
import SiteHead from '@/components/SiteHead.astro';
import ContentWrapper from '@/components/ContentWrapper.vue';
import '@/styles/tailwind.css';
import '@/styles/home.css';
import { buildMenu, Frontmatter } from '@/utils/seo';

const { frontmatter } = Astro.props;

const menu = [
  {
    title: 'guide',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/guide/*.mdx')),
  },
  {
    title: 'plugins',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/plugins/*.mdx')),

  },
  {
    title: 'examples',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/examples/*.mdx')),
  },
  {
    title: 'api reference',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/api/*.mdx')),
  },
];
---

<html>
  <SiteHead {...Astro.props} />
  <body>
    <TheHeader client:load menu={menu} currentUrl={frontmatter.url}  />
    <div class="App">
      <main class="main">
        <div class="flex flex-col items-center justify-center mb-16">
          <img src="/logo.png" width="300" height="300" alt="" />
          <h1 class="mt-4 text-4xl font-bold font-display">{frontmatter.title}</h1>
          <p class="mt-4 text-xl text-gray-800">{frontmatter.description}</p>

          <div class="mt-16 grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-8">
            {frontmatter.features.map(feature => (
              <div>
                <h3 class="md:text-xl font-bold font-display">{feature.title}</h3>
                <p class="mt-2">{feature.details}</p>
              </div>
            ))}
          </div>

          <div class="mt-16 flex items-center justify-center">
            <a class="block mt-8 bg-accent-900 p-4 text-white rounded-lg font-bold text-center" href="/guide/overview">
              📚 Get Started
              </a>
          </div>
        </div>

        <ContentWrapper>
          <slot></slot>
        </ContentWrapper>
      </main>
    </div>
  </body>
</html>


